<template>
<div class="wodeDingd">
    <div class="dingd-top">
        <span class="iconfont" @click="fanh">&#xe641;</span>
        我的订单
    </div>
    <ly-tab class="tabClolor" v-model="selectedId" :items="items" :options="options" @change="handleClick">
    </ly-tab>
    <div class="wode-bottom" v-show="list.length">
        <div class="list" v-for=" item in list" :key="item.id">
            <div class="desc">{{item.desc}}</div>
        </div>
    </div>
    <div class="show">
        <div class="desc1">
            <span class="iconfont">&#xe6e8;</span>
            <h3>暂无订单</h3>
            <p>快去“商城”逛逛吧~</p>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'wodeDingd',
    data() {
        return {
            list: [{
                    id: "1",
                    desc: "ajdlkjaldkj"
                },
                {
                    id: "2",
                    desc: "ajdlkjaldkj"
                },
                {
                    id: "3",
                    desc: "ajdlkjaldkj"
                },
            ],
            show: true,
            options: {
                activeColor: '#1d98bd'
                // 可在这里指定labelKey为你数据里文字对应的字段
            },
            selectedId: 0,
            items: [],
            desc1: [{
                    id: "1",
                    sesc: "全部"
                },
                {
                    id: "2",
                    sesc: "待支付"
                },
                {
                    id: "3",
                    sesc: "组团中"
                },
                {
                    id: "4",
                    sesc: "待使用"
                },
            ],
        }
    },
    mounted() {
        this.it()
    },
    methods: {
        it() {
            for (let i = 0; i < this.desc1.length; i++) {
                let item = {
                    label: this.desc1[i].sesc
                }
                this.items.push(item)
            }
            // console.log(this.items)
        },
        fanh() {
            this.$router.go(-1)
        },
        handleClick(item, index) {
            console.log(index)
        },
    },

}
</script>

<style scoped>
.dingd-top {
    text-align: center;
    width: 100%;
    height: 35px;
    line-height: 35px;
    margin-bottom: 0.5px;
    background-color: #fff;
}

.dingd-top span {
    position: absolute;
    left: 5px;
}

.show {
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 150%;
    background-color: rgb(255, 255, 255);
    text-align: center;
    color: rgb(168, 168, 168);
    position: absolute;
    top: 80px;
    left: 0px;

}

.desc1 {
    margin-top: 50%;
}

.desc1 span {
    font-size: 60px;
    margin-bottom: 10px;
    display: inline-block;

}

.desc1 h3 {
    color: black;
    font-size: 15px;
    margin-bottom: 10px;

}

.wode-bottom {
    position: relative;
    top: 0px;
    left: 0px;
    overflow: hidden;
    width: 100%;
    height: 0px;
    padding-bottom: 150%;
    background-color: rgb(240, 239, 239);
    z-index: 1;
}

.list {
    width: 85%;
    height: 100px;
    background-color: rgb(255, 255, 255);
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 2.5%;
    border-radius: 20px;
    padding: 10px 20px 5px;

}
</style>
